<template>
  <div>
    <el-dialog :title="$t('recharge.rechargeupdate.geupdatetype')" :visible.sync="dialogTableVisible"
      :close-on-click-modal="false" @close="closeDiog">
      <div class="head">
        <div>
          {{ $t('recharge.rechargeupdate.geupdatetype') }}:
        </div>
        <el-radio-group v-model="radio1">
          <el-radio-button label="1">{{ $t('recharge.administration.userrecharge') }}</el-radio-button>
          <el-radio-button label="2">{{ $t('recharge.administration.Bendcharge') }}</el-radio-button>
          <el-radio-button label="3">{{ $t('recharge.rechargeupdate.documentfee') }}</el-radio-button>
        </el-radio-group>

      </div>
      <div v-if="radio1 != 3">
        <el-table :data="dataList" header-cell-class-name="table-header" row-class-name="table-row-low"
          style="width: 100%" ref="hotTable">

          <el-table-column :label="$t('recharge.rechargeupdate.rechargeentry')" align="left" prop="title">
            <template slot-scope="scope">
              <span class="table-cell-text">{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="content" align="left" :label="$t('recharge.rechargeupdate.rechargemoney')">
            <template slot-scope="scope">
              <span class="table-cell-text">{{ scope.row.content }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="recDate" align="left" :label="$t('recharge.rechargeupdate.givemoney')">
            <template slot-scope="scope">
              <span class="table-cell-text">{{ scope.row.content }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="recDate" align="left" :label="$t('recharge.rechargeupdate.discount')">
            <template slot-scope="scope">
              <span class="table-cell-text">{{ scope.row.content }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="recDate" align="left" :label="$t('recharge.rechargeupdate.amount')">
            <template slot-scope="scope">
              <span class="table-cell-text">{{ scope.row.content }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('recharge.administration.operation')" fixed="right" width="180">
            <template slot-scope="scope">
              <div class="text-btn-con">
                <div class="default-btn text-btn">{{ $t('text.delBtn') }}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="rule">
          <div>{{ $t('recharge.rechargeupdate.rules') }} </div>
          <div>{{ $t('recharge.rechargeupdate.scheme') }}</div>
        </div>
      </div>
      <div class="dams" v-if="radio1 == 3">
        <el-form :inline="true" class="search-form" ref="test-form" :model="searchForm" label-width="auto" size="small"
          style="display: flex; justify-content: space-between">
          <div class="input-row">
            <el-form-item :label="$t('recharge.administration.schemename')" class="search-form-item">
              <el-input v-model="form.name" :placeholder="$t('recharge.rechargeupdate.name')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('recharge.rechargeupdate.type')" class="search-form-item">
              <el-select v-model="form.type" :placeholder="$t('recharge.rechargeupdate.geupdatetype')">
                <el-option :label="$t('recharge.rechargeupdate.words')" value="1"></el-option>
                <el-option :label="$t('recharge.rechargeupdate.other')" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('recharge.rechargeupdate.price')" class="search-form-item">
              <el-input v-model="form.name" :placeholder="$t('recharge.rechargeupdate.pleaseprice')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('recharge.administration.Enablestate')" class="search-form-item">
              <el-radio v-model="radio2" label="1">{{ $t('recharge.rechargeupdate.Enable') }}</el-radio>
              <el-radio v-model="radio2" label="2">{{ $t('recharge.rechargeupdate.Disable') }}</el-radio>
            </el-form-item>
          </div>
          <div>
          </div>
        </el-form>
      </div>
      <div class="footer">
        <div class="default-btn" @click="cancel">取消</div>
        <div class="default-btn primary-btn">确认</div>
      </div>

    </el-dialog>

  </div>
</template>
<script>

export default {
  props: ["itemInOf"],

  data() {
    return {
      radio1: '1',
      radio2: '1',
      dialogTableVisible: false,
      input: '',
      textarea: '',
      form: {
        type: "",
        region: "",
        name: "",
        DAWname: "",
      },
    };
  },

  methods: {
    //关闭铸币申请弹窗
    closeDiog() {
      this.fileList = []
    },
    init() {
      this.dialogTableVisible = true;
      this.$nextTick(() => {
      });
    },

    //关闭选择充值类型弹窗
    cancel(){
      this.dialogTableVisible = false;
    },
    openApplyCoinage() {

    }
  },
};
</script>
<style scoped>
/* 去掉全选按钮 */
.el-table .disabledCheck .cell .el-checkbox__inner {
  display: none !important;
}

.el-table .disabledCheck .cell::before {
  content: "选择";
  text-align: center;
  line-height: 10px;
}

.block {
  margin-top: 30px;
}

.head {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.head .el-radio-group{
  margin-left: 1%!important;
}

.right {
  width: 700px;
  height: 140px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 50px;


}

.hight {
  width: 400px;
  height: 140px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 110px;
}

.dams {
  width: 400px;
}
.dams >>> .el-input{
  width: 200px;
  margin-left: 1%;
}

.rule{
  display: flex;
  margin-top: 20px;
}
.rule div:last-child{ margin-left: 10px; }
.footer{
  display: flex;
  justify-content: flex-end;
}
</style>
  